<template>
  <div class="login-layout">
    <div class="back" @click="goBack()">
      <img src="@/assets/login_images/back.png" />
    </div>
    <div class="login-layout-lt">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            v-for="(item, index) in swiperList"
            :key="index"
            class="swiper-slide"
          >
            <img alt="" class="layout-swiper-item__img" :src="item.img" />
            <h3 class="layout-swiper-item__title">
              {{ item.title }}
            </h3>
            <p class="layout-swiper-item__info">
              {{ item.info }}
            </p>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="login-layout-rt">
      <!-- <img class="login-layout__logo" src="@/assets/image/logo-bg.png" /> -->
      <div class="login-layout-rt__wp">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper' // 注意引入的是Swiper
  import 'swiper/css/swiper.min.css' // 注意这里的引入
  import login_bg1 from '@/assets/login_images/login-bg1.png'
  import login_bg2 from '@/assets/login_images/login-bg2.png'
  import login_bg3 from '@/assets/login_images/login-bg3.png'
  export default {
    name: 'LoginLay',
    data() {
      return {
        swiperList: [
          {
            img: login_bg1,
            title: '数字支付与金融服务平台',
            info: '在全球收付款、钱包账户、财务管理以及金融增值服务多场景提供解决方案，赋能企业全球展业。',
          },
          {
            img: login_bg2,
            title: '多币种账户',
            info: '一个账户，全球收付，业务无忧，多场景多币种收付的优选方案。',
          },
          {
            img: login_bg3,
            title: '星座卡(VCC)',
            info: '在全球收付款、钱包账户、财务管理以及金融增值服务多场景提供解决方案，赋能企业全球展业。',
          },
        ],
      }
    },
    mounted() {
      this.getSwiper()
    },
    methods: {
      getSwiper() {
        this.swiper = new Swiper('.swiper-container', {
          loop: true, // 无缝
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: true, //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 20, // 间隔
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
            clickable: true, // 分页器可以点击
          },
          // effect: 'fade',
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .login-layout {
    display: flex;
    width: 100vw;
    min-width: 1440px;
    height: 100vh;
    background-color: #fcfaff;
    .back {
      position: absolute;
      top: 100px;
      left: 150px;
      cursor: pointer;
    }
    .login-layout-lt {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 100%;

      .swiper-container {
        box-sizing: border-box;
        width: 624px;

        .swiper-wrapper {
          padding-bottom: 100px;
          background-color: #fcfaff;

          .layout-swiper-item__img {
            width: 100%;
            height: 360px;
          }

          .layout-swiper-item__title {
            margin-top: 46px;
            font-size: 30px;
            color: #333333;
            text-align: center;
          }

          .layout-swiper-item__info {
            margin-top: 20px;
            font-size: 20px;
            line-height: 33px;
            color: #666666;
            text-align: center;
          }
        }
      }
    }

    .login-layout-rt {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 45%;
      height: 100%;
      padding: 0 75px;
      background: #fff;

      .login-layout__logo {
        width: 156px;
        height: 46px;
      }

      .login-layout-rt__wp {
        width: 100%;
        max-width: 500px;
      }
    }
  }

  ::v-deep(.swiper-pagination-bullet-active) {
    background: #6b1ce9 !important;
  }
</style>
